<script lang="ts" setup>
import { TableOptions } from '@/components/table/src/types';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const editRowTarget = ref<boolean>(false);

const options: TableOptions[] = [
  {
    prop: 'date',
    label: '日期',
    width: '180',
    align: 'center',
    slot: 'date',
    editable: true,
  },
  {
    prop: 'name',
    label: '姓名',
    width: '180',
    align: 'center',
    slot: 'name',
  },
  {
    prop: 'address',
    label: '地址',
    align: 'center',
    editable: true,
  },
  {
    label: '操作',
    action: true,
    align: 'center',
  },
];
const data = ref<any[]>([
  {
    date: '2022-05-04',
    name: 'Tom',
    address: 'gd',
  },
  {
    date: '2021-06-04',
    name: 'zhangs',
    address: 'sddfsdfsdfsdfsdfsdfsdfsdfdfsssssssssssssssssfdfsdfsdfsdfsdfsd',
  },
  {
    date: '2024-52-1',
    name: 'lis',
  },
]);
const current = ref<number>(1);
const pageSize = ref<number>(100);
const total = ref<number>(0);
const getData = () => {
  axios
    .post('/api/list', {
      current: current.value,
      pageSize: pageSize.value,
    })
    .then((res: any) => {
      if (res.data.code === '200') {
        data.value = res.data.data.rows;
        total.value = res.data.data.total;
        console.log(res.data.data);
      }
    });
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  current.value = val;
  getData();
};
onMounted(() => {
  getData();
});
const edit = (scope: any) => {
  editRowTarget.value = true;
};

const cancel = () => {
  editRowTarget.value = false;
};
</script>

<template>
  <mn-table
    v-model:editRowTarget="editRowTarget"
    :options="options"
    :data="data"
    :is-edit-row="true"
    :total="total"
    :current-page="current"
    :page-size="pageSize"
    pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
    <template #editAction>
      <el-button type="primary">确认</el-button>
      <el-button type="primary" @click="cancel">重置</el-button>
    </template>
    <template #action="scope">
      <el-button type="primary" @click="edit(scope)">编辑</el-button>
      <el-button type="danger">删除</el-button>
    </template>
    <template #date="{ row }"> {{ row.name }} </template>
    <template #name> 6sssssssssssssssssssssssssssssssssssssssssssss66 </template>
  </mn-table>
</template>

<style lang="scss" scoped></style>
